<template>
  <div class="Equipment-data">
    <el-card :body-style="{ padding: '0px' }">
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <table-list
        id="tableExcel"
        :table="table"
        ref="tableList"
        @handleEdit="handleEdit"
        @handleDel="handleDel"
      >
        <template slot-scope="props" slot="permissionId">
          <!-- <img :src="props.obj.row.imageUrl" style="height:50px;width:60px;" /> -->
          <div>
            <span v-if="props.obj.row.permissionId === '1'">超级管理员</span>
            <span v-else-if="props.obj.row.permissionId === '2'">餐饮公司</span>
            <span v-else-if="props.obj.row.permissionId === '3'">清洗公司</span>
            <span v-else-if="props.obj.row.permissionId === '4'">监督人员</span>
          </div>
        </template>
      </table-list>
      <pagination
        :page="page"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      />
    </el-card>
    <el-dialog
      :title="editDialog.title"
      v-if="editDialog.visible"
      :visible.sync="editDialog.visible"
      @close="closeDialog('editDialog')"
      width="40%"
    >
      <el-form :model="editDialog.data" ref="editDialog.data" label-width="90px">
        <el-form-item label="企业名称">
          <el-input v-model="editDialog.data.person_name" size="mini" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="editDialog.data.username" size="mini" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editDialog.data.password" size="mini" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editDialog.data.tel" size="mini" />
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button size="small" plain @click="closeDialog('editDialog')">取 消</el-button>
        <el-popover class="edit-dialog-popover" placement="top" v-model="editDialog.submitVisible">
          <p style="text-align: center; margin-top: 0; color:#409eff">确定提交吗？</p>
          <div style="text-align: center">
            <el-button size="mini" @click="editDialog.submitVisible = false" v-text="'取 消'" plain />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              v-if="showPrise"
              @click="handleSubmit"
              plain
              id="btn"
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              v-if="showRentPrise"
              @click="handleAdd"
              plain
            />
          </div>
          <el-button slot="reference" type="primary" size="small" v-text="'提 交'" plain />
        </el-popover>
      </span>
    </el-dialog>
    <el-dialog
      v-if="dialogTableVisible.visible"
      :visible.sync="dialogTableVisible.visible"
      width="30%"
    >
      <img :src="scrurl" style="width:100%;" />
    </el-dialog>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableList from "../../components/Table/TableList";
import Pagination from "../../components/Pagination/pagination";
import TableProp from "../../utils/tableProps.js";
import PageProp from "../../utils/pageProps5.js";
import THead from "./Hequipment.js";
export default {
  name: "Equipment",
  data() {
    return {
      table: TableProp,
      page: PageProp,
      toolsData: {
        title: "清洗公司管理",
        oBtnShow: [
          { btn0: true }, // 新增按钮
          { btn1: true }, // 刷新按钮
          { btn2: false }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: true } // 导出Excel按钮
        ]
      },
      editDialog: {
        title: "编 辑",
        visible: false,
        submitVisible: false,
        data: null
      },
      showPrise: false,
      showRentPrise: false,
      imageUrl: "",
      dialogTableVisible: {
        visible: false,
        data: null
      },
      timedata: false,
      showtimedata: false,
      scrUrl: "",
      scrurl: "",
      showimage: false
    };
  },
  components: {
    ToolsBtn,
    TableList,
    Pagination
  },
  created() {
    this.table.tHead = THead;
    this.table.hasOperation = true;
    this.table.identifier = true;
    this.table.operation.data = [
      {
        id: 1,
        label: "编 辑",
        Fun: "handleEdit",
        btnType: "text",
        plain: false,
        size: "mini",
        className: "handleEdit"
      }
    ];
    this.getList(1, 10);
  },
  methods: {
    //新增用户
    addData() {
      // 新增
      // console.log('新增')
      this.handleEdit();
    },
    // 数据刷新
    refresh() {
      //刷新
      // console.log('刷新')
      this.getList(1, 10);
    },
    // 搜素数据
    search() {
      // console.log('搜素')
      // console.log(this.query)
    },
    // 字段设置
    fieldSet() {
      // console.log("字段设置");
    },
    // 隐藏表格操作列
    hasOperation() {
      // console.log("隐藏表格操作列");
      this.table.hasOperation = !this.table.hasOperation;
    },
    dianji(name) {
      this.dialogTableVisible.visible = true;
      this.scrurl = name;
    },
    getList(pageNo, pageSize) {
      this.table.data = [];
      this.table.loading = true;
      const params = {
        pageNo,
        pageSize,
        permissionId: 3
      };
      this.$api.EQUIPMENT.GETLIST(params)
        .then(res => {
          const data = res.data;
          const total = res.count;
          this.table.data = data;
          this.page.total = total;
          this.table.loading = false;
        })
        .catch(() => {
          this.table.data = [];
          this.page.total = 0;
          this.table.loading = false;
          this.$message({
            message: "暂无数据",
            type: "warning"
          });
          // console.log(err);
        });
    },
    handleEdit(index, row) {
      this.editDialog.visible = true;
      if (index !== undefined && row !== undefined) {
        this.showPrise = true;
        this.showRentPrise = false;
        const title = `编辑`;
        this.editDialog.title = title;
        this.timedata = true;
        this.showtimedata = false;
        const data = row;
        this.editDialog.data = data;
        this.scrUrl = data.imageUrl;
        this.showimage = true;
      } else {
        this.showRentPrise = true;
        this.showPrise = false;
        this.showtimedata = true;
        this.timedata = false;
        this.editDialog.title = "添加";
        this.editDialog.data = {};
        this.showimage = false;
      }
    },
    // 新增厂家设备
    handleAdd() {
      function _p(s) {
        return s < 10 ? "0" + s : s;
      }
      var releaseTime = "";
      if (this.editDialog.data.releaseTime == undefined) {
        releaseTime = "";
      } else {
        const limit = new Date(this.editDialog.data.releaseTime);
        releaseTime = `${limit.getFullYear()}-${_p(limit.getMonth() + 1)}-${_p(
          limit.getDate()
        )}`;
      }
      const params = {
        person_name: this.editDialog.data.person_name,
        permissionId: 3,
        username: this.editDialog.data.username,
        password: this.editDialog.data.password,
        tel: this.editDialog.data.tel
      };
      this.$api.USERMANAGE.addData(params)
        .then(res => {
          this.getList(1, 10);
          this.$message({
            message: res.message,
            type: "success"
          });
        })
        .catch(() => {
          // console.log(err);
        });
      this.editDialog.visible = false;
      this.editDialog.submitVisible = false;
    },
    // 更新厂家设备
    handleSubmit() {
      const params = {
        person_name: this.editDialog.data.person_name,
        permissionId: this.editDialog.data.permissionId,
        username: this.editDialog.data.username,
        password: this.editDialog.data.password,
        tel: this.editDialog.data.tel,
        rid:this.editDialog.data.rid
      };
      this.$api.USERMANAGE.upData(params)
        .then(res => {
          this.getList(1, 10);
          this.$message({
            message: res.message,
            type: "success"
          });
        })
        .catch(() => {
          this.$message({
            message:'更新失败',
            type:'warning'
          })
          // console.log(err);
        });
      this.editDialog.visible = false;
      this.editDialog.submitVisible = false;
    },
    // 删除
    handleDel() {
      // console.log("删除")
    },
    // 分页大小
    pageSizeChange(size) {
      // console.log(`每页 ${size} 条`);
      const tableDataLength = this.table.data.length;
      this.page.pageSize = size;
      if (tableDataLength < this.page.pageSize) {
        this.getList(1, size);
      } else {
        const pageNo = this.page.currentPage;
        this.getList(pageNo, size);
      }
    },
    // 翻页
    pageCurrentChange(pageNo) {
      // console.log(`当前页: ${pageNo}`);
      this.page.currentPage = pageNo;
      const size = this.page.pageSize;
      this.getList(pageNo, size);
    },
    closeDialog(name) {
      if (name === "editDialog") {
        this[name].submitVisible = false;
        this[name].data = null;
      }
      this[name].visible = false;
    },
    // 图片上传成功
    fileSuccess(res) {
      this.imageUrl = res.url;
    }
  }
};
</script>
<style lang="scss" scoped>
#particulars {
  cursor: pointer;
  color: #67c23a;
  text-decoration: none;
}
/deep/ .el-dialog .el-dialog__title {
  font-size: 12px;
}
/deep/ .el-dialog .el-form-item__label {
  font-size: 12px;
}
/deep/ .el-table tr td:nth-child(1) {
  text-align: center;
}
/deep/ .el-table thead tr th:nth-child(1) {
  margin-left: 20px;
}
.el-select{
  width: 100%
}
</style>


